import React, { useSyncExternalStore } from "react";
import { todosStore } from "./todoStore";

const TodosApp: React.FC = () => {
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);

  return (
    <>
      <button onClick={() => todosStore.addTodo()}>添加代办事项</button>
      <hr />
      <ul>
        {todos.map(todo => {
          return <li key={todo.id}>{todo.text}</li>;
        })}
      </ul>
    </>
  );
};
export default TodosApp;
